<template>
  <div id="app">
    <button @click="loadNormalDatas">load normal datas</button>
    <button @click="loadFrozenDatas">load frozen datas</button>
    <h1>normal datas count: {{ normalDatas.length }}</h1>
    <h1>freeze datas count: {{ freezeDatas.length }}</h1>
  </div>
</template>

<script setup>
import { ref } from "vue";
const normalDatas = ref([]);
const freezeDatas = ref([]);
function loadNormalDatas() {
  normalDatas.value = getDatas();
}
function loadFrozenDatas() {
  freezeDatas.value = Object.freeze(getDatas());
  console.log("freezeDatas", this.freezeDatas);
}
function getDatas() {
  const result = [];
  for (var i = 0; i < 1000000; i++) {
    result.push({
      id: i,
      name: `name${i}`,
      address: {
        city: `city${i}`,
        province: `province${i}`,
      },
    });
  }
  return result;
}
</script>

<style>
</style>
